<template>
  <div class="CouponList">
    <el-table
        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%">
      <el-table-column
          label="订单ID"
          prop="oid">
      </el-table-column>
      <el-table-column
          label="订单编号"
          prop="onumber">
      </el-table-column>
      <el-table-column
          label="实际价格"
          prop="oactual">
      </el-table-column>
      <el-table-column
          label="实际支付"
          prop="otopay">
      </el-table-column>
      <el-table-column
          label="创建时间"
          prop="oCreate">
      </el-table-column>

      <el-table-column
          align="right">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">
            查看详情
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      /*订单列表大概信息展示*/
      tableData: [{
        oid: '',
        onumber: '',
        oactual: '',
        otopay: '',
        oCreate: '',
      }],
      search: ''
    }
  },
  mounted() {
    this.$http({
      url: 'rjbOrder/queryByList?rid=0',
    }).then(data => {
      this.tableData = data.data;
      console.log(data);
    }).catch(error => {
      console.log(error);
    })
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
}
</script>

<style scoped>
.CouponList {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
